<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>开票信息列表</span>
    </div>
    <v-searchForm
      :form-data="filter_info"
      :form-title="formTitle"
      @search="search"
      @reset="reset"/>
    <v-tableBtns
      :show-export="false"
      :table-title="exportTitle"
      :table-data="exportData"
      :show-create="true"
      @addNew="addNew"
    />

    <v-table
      :table-title="tableTitle"
      :table-data="tableData"
      btn-class="btn"
      @sortChange="sortChange"
      @del="onDelete"
      @edit="edit"
    />
    <v-pagination
      :page-info="pageInfo"
      :get-table-list="getTableList"
    />
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Home',
  data() {
    return {
      // f分页
      pageInfo: {
        pageNumber: 1,
        pageSize: 30,
        totalPage: 0,
        totalRow: 0
      },
      // 排序
      sidx: 'id',
      sortKey: null,
      formTitle: [
        {
          cn: '开票公司名称: ',
          en: 'name'
        },
        {
          cn: '创建时间: ',
          en: 'created_at',
          type: 'time'
        }
      ],
      filter_info: {},

      tableTitle: [
        {
          cn: 'id',
          en: 'id',
          sortable:true
        },
        {
          cn: '开票公司名称',
          en: '开票公司名称',
          sortable: true
        },
        {
          cn: '税号',
          en: '纳税人识别号'
        },
        {
          cn: '公司地址',
          en: '公司地址'
        },
        {
          cn: '电话',
          en: '电话'
        },
        {
          cn: '发票类别',
          en: '发票类别',
          sortable: true
        },
        {
          cn: '创建时间',
          en: 'created_at',
          sortable: true
        }
      ],
      tableData: [],
      exportTitle:[],
      exportData:[]

    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ]),
    filter_infos() {
      const data = {}
      const origin = this.filter_info
      for (const key in origin) {
        if (!this.filter_info[key] && this.filter_info[key] !== 0) {
          this.$delete(this.filter_info, key)
          continue
        }
        if (key === 'created_at') {
          data.startDate = origin[key][0]
          data.endDate = origin[key][1]
        } else {
          data[key] = origin[key]
        }
      }
      if (!origin.created_at) {
        delete data.start_time
        delete data.End_time
      }
      return data
    }
  },
  activated() {
    this.getTableList( )
  },
  methods: {
    getTableList(data) {
      const loading = this.$loading()

      let datas = {
        ...this.filter_infos,
        page: this.pageInfo.pageNumber, rows: this.pageInfo.pageSize,
        sidx: this.sidx,
        sortKey: this.sortKey,
      }

      this.$get('action/InvoiceInformation/dataGrid', datas)
        .then(res => {
          let list
          if (res.data.list && res.data.list.length) {
            list = res.data.list.map((item, index) => {
              switch (item.发票类别) {
                case '1':
                  item.发票类别 = '专票'
                  break
                case '2':
                  item.发票类别 = '普票'
                  break
              }
              return item
            })
            this.pageInfo.totalPage = res.data.totalPage
            this.pageInfo.totalRow = res.data.totalRow
          }

          this.tableData = list || []
            loading.close()
        })
        .catch(err => {
        loading.close()
        this.$message({
          message: '获取数据失败',
          type: 'error'
        })
      })
    },

    // 搜索
    search() {
      this.pageInfo.pageNumber=1
      this.getTableList()
    },

    reset() {
      this.filter_info = {}
      this.getTableList()
    },
    addNew() {
      // 跳转到创建页面
      this.$router.push({
        name: 'invoice_info.modify'
      })
    },
    edit(val) {
      this.$router.push({
        name: 'invoice_info.modify',
        query: {
          id: val.row.id
        },
        params: {
          details: val.row
        }
      })
    },
    onDelete(val) {
      const data = { id: val.row.id }
      this.$post('action/InvoiceInformation/del', data)
        .then(res => {
          this.getTableList()
          this.$message({
            message: res.msg,
            type: 'success'
          })
        })
    },

    // 排序
    sortChange({ column, prop, order }) {
      console.log(column, prop, order)
      this.sidx = prop || 'id'
      this.sortKey = order === 'ascending' ? 'asc' : null
      this.getTableList()
    }

  },
}
</script>
